<!--  
* @Author: GaoXu  
* @Date: 2024/7/19 11:12  
* @Description:   告警分布
-->
<template>
  <div class="alarm-distribution-chart" ref="alarmDistributionChart"></div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick, watch } from 'vue';
  import * as echarts from 'echarts';
  import { fontSize } from '/@/utils/echartsRem';
  import {
    queryEquipWarn,
  } from '/@/api/comprehensiveAlarm/api-alarmStatistics';
  import { defHttp } from '/@/utils/http/axios';

  const props = defineProps({
    // 作业面id
    workAreaId: {
      type: String,
      default: '',
    },
    // 页面类型【全部, PLC, 网络设备】
    stationId: {
      type: String,
      default: '',
    },
    // 时间范围
    dateRange: {
      type: Array,
      default: () => [],
    },
  });
  // 监听作业面
  watch(
    () => props.workAreaId,
    (value) => {
      nextTick(() => {
        init();
      });
    },
    {
      immediate: true,
    },
  );
  // 监听页面类型
  watch(
    () => props.stationId,
    (value) => {
      nextTick(() => {
        init();
      });
    },
  );
  // 监听时间范围
  watch(
    () => props.dateRange,
    (value) => {
      if (value.length > 0) {
        nextTick(() => {
          init();
        });
      }
    },
    {
      immediate: true,
    },
  );
  const alarmDistributionChart = ref();
  let dataArr:any = [];
  let option = {};
  function setOptionData() {
    let regionList = dataArr.map((item) => item['name']);
    let urgentNumList = dataArr.map((item) => item['URGENT']);
    let importantNumList = dataArr.map((item) => item['IMPORTANT']);
    let commonNumList = dataArr.map((item) => item['COMMON']);
    let generalNumList = dataArr.map((item) => item['GENERAL']);
    option = {
      grid: {
        top: fontSize(50),
        left: fontSize(55),
        bottom: fontSize(55),
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(6,17,45,0.8)',
        borderColor: 'rgba(6,17,45,0.8)',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(216, 230, 255, .2)',
          },
          label: {
            show: false,
            color: '#517FFD',
            backgroundColor: 'transparent',
            fontSize: fontSize(12),
          },
        },
        formatter: function (params) {
          var str = '<div>';
          params.forEach((el) => {
            if (el.seriesName !== 'maxdata') {
              str += `<div style="display: flex;align-items: center;padding:${fontSize(
                3,
              )}px 0;border-radius: ${fontSize(
                8,
              )}px;color:rgba(226, 235, 250, 1);font-size:${fontSize(14)}px">
                <div style="width:${fontSize(6)}px;height:${fontSize(6)}px;margin-right: ${fontSize(
                7,
              )}px;background-color:${el.color.colorStops[0].color}"></div>
                <span style="margin-right: ${fontSize(30)}px">${el.seriesName}</span>
                <span>${el.value}</span>
                </div>`;
            }
          });
          str += '</div>';
          return str;
        },
      },
      dataZoom: [
        {
          type: 'inside',
          show: true,
          height: 15,
        },
      ],
      xAxis: {
        data: regionList,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(7, 52, 141, 1)',
          },
        },
        axisLine: {
          show: false, // 隐藏X轴轴线
          lineStyle: {
            color: 'rgba(221, 221, 221, 1)',
            width: fontSize(2),
          },
        },
        axisTick: {
          show: false, // 隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          margin: fontSize(10),
          textStyle: {
            color: '#E4F2FF', // X轴文字颜色
            fontFamily: 'AlibabaPuHuiTi-2-55-Regular',
            fontSize: fontSize(14),
          },
        },
      },
      yAxis: [
        {
          type: 'value',
          name: '（条）',
          nameTextStyle: {
            color: 'rgba(228, 242, 255, 1)',
            padding: [0, fontSize(40), -fontSize(5), 0],
            fontSize: fontSize(14),
            fontStyle: 'italic',
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(7, 52, 141, 1)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: fontSize(12),
            textStyle: {
              color: 'rgba(228, 242, 255, 1)',
              fontFamily: 'AlibabaPuHuiTi-2-55-Regular',
              fontSize: fontSize(14),
              fontStyle: 'italic',
            },
          },
        },
      ],
      series: [
        {
          name: '紧急',
          type: 'bar',
          barWidth: fontSize(6),
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(255, 100, 148, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(255, 100, 148, 0)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          data: urgentNumList,
          zlevel: 10,
        },
        {
          name: '重要',
          type: 'bar',
          barWidth: fontSize(6),
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(252, 169, 137, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(252, 169, 137, 0)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          data: importantNumList,
          zlevel: 10,
        },
        {
          name: '一般',
          type: 'bar',
          barWidth: fontSize(6),
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(243, 255, 143, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(243, 255, 143, 0)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          data: commonNumList,
          zlevel: 10,
        },
        {
          name: '普通',
          type: 'bar',
          barWidth: fontSize(6),
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(143, 255, 196, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(143, 255, 196, 0)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          data: generalNumList,
          zlevel: 10,
        },
        {
          name: 'maxdata',
          type: 'custom',
          itemStyle: {
            color: 'rgba(5,41,132,0.3)',
          },
          renderItem: function (params, api) {
            //获取对应类目的axisTick中心点坐标
            var start = api.coord([api.value(0)]);

            //通过坐标系的宽度和类目数，计算单个类目的背景
            var width = (params.coordSys.width / 4) * 0.4;

            return {
              type: 'rect',
              shape: {
                // 相对左上角坐标
                x: start[0] - width / 2,
                y: params.coordSys.y,
                width: width,
                height: params.coordSys.height,
              },
              style: api.style(),
            };
          },
          data: regionList.map(() => 0),
        },
      ],
    };
  }
  /** 图表初始化 */
  function init() {
    let url = queryEquipWarn;
    defHttp
      .get({
        url,
        params: {
          workAreaId: props.workAreaId,
          stationId: props.stationId,
          beginTime: props.dateRange[0],
          endTime: props.dateRange[1],
        },
      })
      .then((res) => {
        if (res) {
          if (res.length > 0) {
            dataArr = res;
          } else {
            dataArr = [
              {
                name: '暂无数据',
                URGENT: 0, // 紧急
                IMPORTANT: 0, // 重要
                COMMON: 0, // 一般
                GENERAL: 0, // 普通
              },
            ];
          }
          setOptionData();
          let chart = echarts.init(alarmDistributionChart.value);
          chart.setOption(option);
          const resizeObserver = new ResizeObserver(() => {
            chart.resize();
          });
          resizeObserver.observe(alarmDistributionChart.value);
        }
      });
  }
</script>
<style lang="less" scoped>
  .alarm-distribution-chart {
    width: 100%;
    height: 100%;
  }
  .legend {
    width: 6px;
    height: 6px;
  }
  .my-tooltip-box {
    background: rgba(6, 17, 45, 0.8);
    border-radius: 8px;
  }
</style>
